<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="我的团队" :topheight="navBarHeight"></HeadNav>

		<view class="my">
			<view class="title">推荐我的</view>
			<view class="item">
				<image :src="info.avatar" mode="aspectFill"></image>
				<view class="item_r">
					<view><text>{{info.nickname}}</text><text class="num">{{info.number}}</text></view>
					<view><text>ID:{{info.id}}</text><text>他推荐/人</text></view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title">我推荐的</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="item" v-for="item in list">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="item_r">
						<view><text>{{item.nickname}}</text><text class="num">{{item.number}}</text></view>
						<view><text>ID:{{item.id}}</text><text>他推荐/人</text></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import UNI_APP from '@/.env.js'
	import { inviteList } from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	import HeadNav from "@/components/HeadNav"
	export default {
		data() {
			return {
				scrollTop: 0,
				page: 1,
				size: 10,
				info: '',
				list: '',
				isAll: false,
			}
		},
		mixins: [navBarMixin],
		components: {
			HeadNav
		},
		onLoad(e) {
			console.log(e);
			this.getList(1,e.tome)
			this.getList(2,e.me)
		},
		methods: {
			getList(type,e) {
				inviteList({
					pageNum:this.page,
					pageSize:this.size,
					userId:e
				}).then(res=>{
					console.log(res);
					if(res.code==0) {
						if(type==1) {
							this.info= res.data
						}else {
							// this.list = res.data.childrens.records
							var info = this.list
							if (this.page == 1) {
								this.list = res.data.childrens.records
							} else {
								this.list = info.concat(res.data.childrens.records)
							}
							this.isAll = res.data.childrens.records.length < 10 ? false : true
						}
					}
				})
			},
			lower(e) {
				if (this.isAll) {
					this.page++;
					this.getList()
				}
			},
			scroll(e) {
				// console.log(e);
			},
			upper(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="less" scoped>
	.wf-box {
		overflow: hidden;
		// padding-bottom: 60rpx;
	}
	.my {
		// width: 610rpx;
		height: 240rpx;
		// background: url('@/static/img/order_bg2.png') no-repeat;
		// background-size: contain;
		background-color: white;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		margin: 40rpx 30rpx;
		padding: 0 30rpx;
		border-radius: 20rpx;
	}
	
	.title {
		font-weight: 500;
		font-size: 32rpx;
		padding-top: 40rpx;
	}
	
	.scroll-Y {
		height: calc(100vh - 680rpx);
		margin: 30rpx 0 0;
		// background-color: pink;
	}
	
	.info {
		height: calc(100vh - 550rpx);
		// background: url('@/static/img/user_bg.png') no-repeat;
		// background-size: 690rpx calc(100vh - 392rpx);
		background-color: white;
		margin: 40rpx 30rpx;
		position: relative;
		// overflow: hidden;
		padding-top: 1rpx;
		border-radius: 20rpx;
		// background-color: yellow;
	
		.item {
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #dddddd;
			margin: 30rpx 40rpx;
	
			&:first-child {
				margin-top: 0;
			}
		}
	
		.title {
			margin-left: 40rpx;
		}
	}
	
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	
		.item_r {
			flex: 1;
	
			.num {
				font-weight: 500;
				font-size: 36rpx;
			}
	
			view {
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				&:last-child {
					font-size: 24rpx;
					color: #666666;
					margin-top: 12rpx;
				}
			}
		}
	}
</style>